<template>
  <div>
    <ScrollContainer>
      <div ref="wrapperRef" :class="prefixCls">
        <Tabs tab-position="top" @change="adcvd" :activeKey="tab_id">
          <template v-for="item in settingList" :key="item.key">
            <TabPane :tab="item.name">
              <component :is="item.component" />
            </TabPane>
          </template>
        </Tabs>
      </div>
    </ScrollContainer>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, provide } from 'vue';
  import { Tabs } from 'ant-design-vue';

  import { ScrollContainer } from '@/components/Container/index';
  import { settingList } from './data';

  import StorageSetting from './StorageSetting.vue';
  import CloudSetting from './CloudSetting.vue';

  export default defineComponent({
    components: {
      ScrollContainer,
      Tabs,
      TabPane: Tabs.TabPane,
      StorageSetting,
      CloudSetting,
    },
    setup() {
      const tab_id = ref('1');
      provide('tab_id', tab_id); //注入
      function adcvd(res) {
        tab_id.value = res;
      }

      return {
        prefixCls: 'setting-config',
        settingList,
        adcvd,
        tab_id,
      };
    },
  });
</script>
<style lang="less">
  .ant-tabs-tab-active {
    background: none !important;
  }

  .setting-config {
    margin: 12px;
    background-color: @component-background;

    .base-title {
      padding-left: 0;
    }

    .ant-tabs {
      padding: 20px;
    }
  }
</style>
./base/data
